<template>
    <div class="activity-orders">
        <!--列表展示-->
        <div class="ListShow" v-for="order in orders">
            <div class="ListShow-top" @click="goPayment(order.orderNo)">
                <div class="ListShow-name">{{order.orderDetails[0].actName}}</div>
                <div class="ListShow-text">
                    <div class="ListShow-img">
                        <img :src="$store.state.picHead + order.orderDetails[0].activityPoster">
                    </div>
                    <div class="ListShow-details">
                        <div>时间：{{order.orderDetails[0].actStartTime | stampFormate2}}</div>
                        <div class="ListShow-address">地址：{{order.orderDetails[0].address}}</div>
                        <div>票价：{{order.amount |moneyFormate}}</div>
                        <div>张数：{{order.orderDetails[0].ticketNum}}</div>
                    </div>
                </div>
            </div>
            <div class="ListShow-bottom">
                <div class="list-data" v-if="order.status == 5">交易关闭</div>
                <div class="list-data font1" v-if="order.status == 19 || order.status == 3">交易成功</div>
                <div class="list-data" v-if="order.status == 4">交易取消</div>
                <div class="list-data font1" v-if="order.status == 1">待支付</div>
                <div class="list-data font1" v-if="order.status == 2">待审核</div>
                <div class="list-data font1" v-if="order.status == 6">退款待审核</div>
                <div class="list-data font1" v-if="order.status == 7 || order.status == 11">退款中</div>
                <div class="list-data" v-if="order.status == 15">退款成功</div>
                <div class="list-data" v-if="order.status == 9">审核已通过</div>
                <div class="list-data" v-if="order.status == 10">审核未通过</div>
                <div class="list-data" v-if="order.status == 12">退款已拒绝</div>
                <div class="list-btn"
                     v-if="order.status == 19 || order.status == 3 || order.status == 12 || order.status == 9">
                    <div class="E-ticket btn-line" @click="getTicket(order.orderNo)">电子票</div>
                    <div class="apply-for-back btn-line"
                         v-if="order.orderDetails[0].ticketPrice != 0 && order.refund"
                         @click="drawback(order.orderNo)">申请退款
                    </div>
                </div>
                <div class="list-btn" v-if="order.status == 1">
                    <div class="E-ticket btn-line" @click="goPay2(order.orderNo)">去支付</div>
                    <div class="apply-for-back" @click="nopage(order.orderNo)">取消订单</div>
                </div>
                <div class="list-btn" v-if="order.status == 2">
                    <div class="apply-for-back" @click="nopage(order.orderNo)">取消订单</div>
                </div>
            </div>
        </div>
        <!--空空如也-->
        <div class="none" v-if="None">
            <img src="../../assets/image/none.png"/>
            <p>空空如也~</p>
        </div>
        <!---删除地址弹窗-->
        <div class="delectBox" v-if="delAct">
            <div class="delectBox-top">确认取消该订单吗？</div>
            <div class="delectBox-btn">
                <div class="yes font1" @click="delAdd()">确认</div>
                <div class="no" @click="delAddNo()">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        props: ['orders'],
        data () {
            return {
                checked: '1',
                status: null,
                None: false,
                activity: '',
                delAct: false,
                delNo: '',
                busy: false,
                lastPage: false,
                totalPage: '',
            }
        },
        mounted: function () {
            //1.待支付。2.待审核。3.已付款。4.已取消。5.交易关闭。6.退款待审核。7退款中。
            //8.退款失败。9.已通过审核。10.审核不通过。11.退款申请中。12.退款被拒绝。
            //13.撤销退款申请。14.订单支付超时。15.退款成功。16.待领取。17.待发货。18.已发货。19.交易完成。
            let that = this;
        },
        methods: {
            //去订单详情
            goPayment: function (orderNo) {
                let that = this;
                that.$router.push({name: 'payment', params: {orderNo: orderNo, type: '2'}})
            },
            //电子票跳转
            getTicket: function (orderNo) {
                let that = this;
                that.$router.push({name: 'ticket', params: {orderNo: orderNo}})
            },
            //点击退款
            drawback: function (orderNo) {
                let that = this;
                that.$router.push({name: 'payment', params: {orderNo: orderNo, type: '11'}})
            },
            //去支付
            goPay2: function (orderNo) {
                let that = this;
                that.$router.push({path: '/pay/' + orderNo + '/2'})
            },
            //取消订单
            nopage: function (orderNo) {
                let that = this;
                that.delAct = true;
                that.delNo = orderNo;
            },
            //返回
            back: function () {
                let that = this;
                that.$router.push({name: 'mycenter'})
            },
            //删除订单
            delAdd: function () {
                let that = this;
                that.delAct = false;
                userService.noPay(that.delNo).then(function (res) {
                    if (res.data.success) {
                        that.delNo = '';
                        that.$router.go(0);
                    }
                })
            },
            delAddNo: function () {
                let that = this;
                that.delAct = false;
            },
        },
    }
</script>

<style lang="less">
    @import url('../../assets/css/theme.less');

    body {
        background: #F9F9F9;
    }

    .activity-orders {
        width: 100%;
        z-index: 999;
        background: #F9F9F9;
        position: relative;
        * {
            max-width: 450px;
        }
        #mescroll {
            position: absolute;
            top: 2.3rem;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #F9F9F9;
        }
        .title {
            width: 100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index: 100;
            i {
                font-size: .5rem;
                color: #999;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0.2667rem;
            }
        }
        .listactivity {
            width: 100%;
            height: 1.07rem;
            background: #FFFFFF;
            box-shadow: 0 1px 0 0 #E5E9F2;
            .listactivity-list {
                width: 20%;
                height: 1.07rem;
                float: left;
                line-height: 1.07rem;
                font-size: 14px;
                color: #1F2D3D;
                text-align: center;
            }
            .checked-border1 {
                span {
                    height: 1.06rem;
                    border-bottom: 1px solid #6699FF;
                    display: inline-block;
                }
            }
        }
        .ListShow {
            width: 100%;
            margin: 5px 0;
            text-align: left;
            .ListShow-top {
                width: 100%;
                background: #fff;
                padding: 0.27rem 0.53rem;
                box-sizing: border-box;
                box-shadow: inset 0 -1px 0 0 rgba(221, 221, 221, 0.5);
                .ListShow-name {
                    width: 100%;
                    font-size: 16px;
                    color: #333333;
                }
                .ListShow-text {
                    width: 100%;
                    padding: 0.27rem 0 0.3rem 0;
                    overflow: hidden;
                    .ListShow-img {
                        width: 3.2rem;
                        height: 2.13rem;
                        float: left;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .ListShow-details {
                        width: 5.3rem;
                        margin-left: 0.27rem;
                        float: left;
                        div {
                            height: 0.45rem;
                            margin-bottom: 0.13rem;
                            font-size: 14px;
                            color: #666666;
                        }
                        .ListShow-address {
                            width: 100%;
                            height: 0.45rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .ListShow-bottom {
                width: 100%;
                height: 1.33rem;
                background: #fff;
                box-shadow: inset 0 0 0 0 rgba(221, 221, 221, 0.50);
                .list-data {
                    height: 1.33rem;
                    line-height: 1.33rem;
                    float: left;
                    padding-left: 0.53rem;
                    font-size: 16px;
                    color: #666666;
                }
                .font1 {
                    color: #6699FF;
                }
                .list-btn {
                    width: 70%;
                    height: 1.33rem;
                    float: right;
                    padding: 0.21rem 0.53rem;
                    box-sizing: border-box;
                    .apply-for-back {
                        width: 2.1rem;
                        height: 0.9rem;
                        float: right;
                        border: 1px solid #DDDDDD;
                        box-shadow: inset 0 0 0 0 #C0CCDA;
                        border-radius: 69px;
                        text-align: center;
                        line-height: 0.9rem;
                        font-size: 14px;
                        color: #666666;
                    }
                    .E-ticket {
                        width: 2.1rem;
                        height: 0.9rem;
                        float: right;
                        border: 1px solid #6699FF;
                        box-shadow: inset 0 0 0 0 #C0CCDA;
                        border-radius: 69px;
                        text-align: center;
                        line-height: 0.9rem;
                        font-size: 14px;
                        color: #6699FF;
                        margin-left: 0.4rem;
                    }
                }
            }
        }
        .none {
            width: 4.13rem;
            height: 4rem;
            margin: 4.5rem auto;
            img {
                width: 100%;
                height: 3.33rem;
            }
            p {
                text-align: center;
                margin-top: 0.2rem;
                font-size: 13px;
                color: #666666;
            }
        }
        .delectBox {
            width: 6rem;
            height: 3rem;
            box-sizing: border-box;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            border: 1px solid #eee;
            background: #FFFFFF;
            box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
            border-radius: 12px;
            z-index: 1000;
            .delectBox-top {
                width: 100%;
                height: 1.8rem;
                line-height: 1.8rem;
                text-align: center;
                font-size: 14px;
                color: #333333;
            }
            .delectBox-btn {
                width: 100%;
                height: 1.2rem;
                font-size: 14px;
                .yes {
                    width: 50%;
                    height: 1.2rem;
                    line-height: 1.2rem;
                    float: right;
                    color: #007AFF;
                }
                .no {
                    width: calc(50% - 1px);
                    height: 1.2rem;
                    line-height: 1.2rem;
                    float: right;
                    color: #999;
                }
            }
        }
        .inifinte-text {
            background: none;
        }
    }

</style>